<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <link href="/static/bootstrap-4.1.3/dist/css/bootstrap.css" rel="stylesheet">
    <!-- 引入 echarts.js -->
    <script src="/static/jquery.min.js"></script>
    <script src="/static/echarts.min.js"></script>
    <script src="/static/bootstrap-4.1.3/dist/js/bootstrap.js"></script>
    <script src="/static/layer/layer.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script src="/static/common.js"></script>


    {% comment %} <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>{% endcomment %}
</head>
<body>
<div class="container">
    <div class="form-content">
        <div class="row">
            <div class="col-xs-6">
                <form id="form-user-add" class="form-horizontal">
                    <h4 class="form-header h4">设置条件</h4>
                    <div class="form-group">
                        <label for="tscode" class="col-sm-12 control-label">股票代码名:</label>
                        <div class="col-sm-12">
                            <input name="tscode" id="tscode" placeholder="股票代码名" class="form-control" type="text"
                                   maxlength="30" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-8 control-label"><span style="color: red; ">*</span>开始时间：</label>
                                <div class="col-sm-12">
                                    <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                           name="startTime"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-12 control-label"><span style="color: red; ">*</span>结束时间：</label>
                                <div class="col-sm-12">
                                    <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                           name="endTime"/>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-4 control-label"><span style="color: red; ">*</span>MACD:F：</label>
                                <div class="col-sm-12">
                                    <input name="macdF" id="macdF" placeholder="请输入MACD:F" class="form-control"
                                           type="text"
                                           maxlength="30" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-12 control-label"><span
                                        style="color: red; ">*</span>MACD:SL：</label>
                                <div class="col-sm-12">
                                    <input name="macdSL" id="macdSL" placeholder="请输入MACD:SL" class="form-control"
                                           type="text" maxlength="11" required>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-4 control-label"><span
                                        style="color: red; ">*</span>MACD:SI：</label>
                                <div class="col-sm-12">
                                    <input name="macdSI" id="macdSI" placeholder="请输入MACD:SI" class="form-control"
                                           type="text" maxlength="11" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label"><span style="color: red; ">*</span>买：</label>
                                <div class="col-sm-12">
                                    <input type="text" class="form-control" id="buy" placeholder="买入参数" name="buy"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label"><span style="color: red; ">*</span>卖：</label>
                                <div class="col-sm-12">
                                    <input type="text" class="form-control" id="sell" placeholder="卖出参数" name="sell"/>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="row">
                        <div class="col-sm-offset-5 col-sm-12" style="text-align:center">
                            <button type="button" class="btn btn-sm btn-primary" id="searchQuery"><i
                                    class="fa fa-check"></i>查 询
                            </button>&nbsp;
                            <button type="button" class="btn btn-sm btn-danger"><i class="fa fa-reply-all"></i>关 闭
                            </button>
                        </div>
                    </div>


                </form>
            </div>
            <div class="col-xs-6">
                <div class="col-sm-12" id="tscodeList">
                    <h4 class="form-header h4">查询列表</h4>
                    <h3></h3>


                </div>


            </div>
        </div>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="tushare" style="width: 1200px;height:600px;"></div>
    </div>
</div>

<script type="text/javascript">


    $(document).ready(function () {
        // console.log(echarts.version);
        var tscode = "";
        showDateLine(tscode);
        showTscodeList();
    });

    function showTscodeList() {
        var dataList = {{ dataList|safe }};

        var html = "";
        $.each(dataList, function (k, v) { //这里的函数参数是键值对的形式，k代表键名，v代表值
            var tscode = dataList[k].tscode;
            html += '<div class="rightcont">';
            html += '<a href=# onclick="showDateLine(\'' + tscode + '\')"><p>' + tscode + '</p></a></div>';
        });
        $("#tscodeList").append(html);


    }


    function showDateLine(tscode) {


//var dom = document.getElementById("tushare");


        var names = [];    //类别数组（实际用来盛放X轴坐标值）
        var nums = [];    //销量数组（实际用来盛放Y坐标值）
        $.ajax({
            type: "POST",
            url: "/chartstest/jsonDate/", 				/* 显示折线图的路径 */
            data: {"tscode": tscode},		/* ,"add":add */

            dataType: "json",
            success: function (data) {

                status = data.status;
                //alert(status);
                {#            {{ dist3 = [] }}#}
                {#            {{ for line in data.dates: }}#}
                {#            {{ for line in range(len(data.dates)): }}#}
                {#            {{ dist2[line]['fields']}}#}
                {#            {{ dist3.append(dist2[line]['fields']) }}#}
                {#            {{ endfor  }}#}

                var name = "";
                //x轴数据
                var xlist = new Array();
                //y轴数据
                var ylist = new Array();
                //
                var brlist = new Array();
                var macdlist = new Array();
                var buylist = new Array();
                var selllist = new Array();
                var starlist = new Array();
                var endlist = new Array();
                var idlist = new Array();
                //利润率
                var profitRatelist = new Array();
                var leDate = [];
                if (status == 0) {
                    tushareList = data.dates;
                    for (var i = 0; i < tushareList.length; i++) {
                        //console.log(tushareList[i]);
                        name = tushareList[i].tscode;
                        xlist[i] = i + 1;
                        ylist[i] = tushareList[i].successRatio;
                        brlist[i] = tushareList[i].tradProfit;
                        macdlist[i] = tushareList[i].macdF + "-" + tushareList[i].macdSI + "-" + tushareList[i].macdSL;
                        buylist[i] = tushareList[i].buy;
                        selllist[i] = tushareList[i].sell;
                        starlist[i] = tushareList[i].startTime;
                        endlist[i] = tushareList[i].endTime;
                        idlist[i] = tushareList[i].id;
                        profitRatelist[i] = tushareList[i].profitability;
                    }
                    //alert(macdlist);
                    var leDate = [];
                    var y = '盈利/元';
                    leDate.push(name);
                    leDate.push(y);
                    //x轴显示的内容
                    var hzlList = new Array();

                    for (var i = 0; i < macdlist.length && i < buylist.length && i < selllist.length; i++) {
                        hzlList[i] = {
                            value: ylist[i],
                            macd: macdlist[i],
                            buy: buylist[i],
                            sell: selllist[i],
                            start: starlist[i],
                            end: endlist[i],
                            br: brlist[i],
                            id: idlist[i],
                            profitRate: profitRatelist[i],

                            //tooltip: {
                            //    show: true,
                            //    formatter: '{b}<br/>置装率：{c}%<br/>macd：' + macdlist[i] + '<br/>买点：' + buylist[i]

                            // }

                        }
                        ;
                    }
                    //console.log(hzlList);

                    var myChart = echarts.init(document.getElementById('tushare'));
                    var option = {};
                    option = {
                        title: {
                            text: "",
                            x: 'center',
                            show: true
                        },
                        legend: {
                            show: true,
                            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                            orient: 'horizontal',
                            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                            x: 'center',
                            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                            y: 'top',
                            data: leDate
                            //data:[name,'盈利/元']

                        },

                        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                        grid: {
                            top: '16%',   // 等价于 y: '16%'
                            left: '3%',
                            right: '8%',
                            bottom: '3%',
                            containLabel: true
                        },
                        // 提示框
                        tooltip: {
                            show: true,//默认值true，可选为：true（显示） | false（隐藏）
                            trigger: 'axis',//默认值'item'，触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
                            // showContent: true,//默认值true，tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false，
                            //formatter: '{a} < br/>{b} : {c}',//默认值null，内容格式器
                            formatter: function (params, ticket, callback) {
                                //根据业务自己拓展要显示的内容，可以打印一下参数选择自己需要的内容

                                var res = "";
                                var name = params[0].name;
                                var value = params[0].value;
                                var macd = params[0].data.macd;
                                var buy = params[0].data.buy;
                                var sell = params[0].data.sell;
                                var start = params[0].data.start;
                                var end = params[0].data.end;
                                var br = params[0].data.br;
                                var profitRate = params[0].data.profitRate;
                                //console.log(params[0].data.macd);
                                //然后在这里设置自己需要添加的一些其他的内容
                                res = "<span style='color:#fff;'>成功率：" + value + "%  </span> 盈利：" + br + "元 利润率：" + profitRate + "%<br/>"
                                    + "<span style='color:#fff;'> 开始时间：" + start + " </span> 结束时间：" + end + "<br/>"
                                    + "<span style='color:#fff;'>macd：" + macd + "</span><br/>"
                                    + "<span style='color:#fff;'> 买入：" + buy + " </span>卖出：" + sell;
                                return res;  //必须要有返回值
                            }

                        },
                        //工具框，可以选择
                        toolbox: {
                            //可视化的工具箱
                            show: true,
                            feature: {
                                dataView: { //数据视图
                                    show: true
                                },
                                restore: { //重置
                                    show: true
                                },
                                dataZoom: { //数据缩放视图
                                    show: true
                                },
                                saveAsImage: {//保存图片
                                    show: true
                                },
                                magicType: {//动态类型切换
                                    type: ['bar', 'line']
                                }
                            }
                        },
                        //x轴显示数据
                        xAxis: {
                            name: '第几次',
                            type: 'category',
                            // 设置X轴数据旋转倾斜
                            axisLabel: {
                                rotate: 30, // 旋转角度
                                interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                            },
                            // boundaryGap值为false的时候，折线第一个点在y轴上
                            boundaryGap: false,

                            //data: xlist
                            data: xlist
                        },
                        yAxis: {
                            name: y,
                            type: 'value'
                            //min: 0, // 设置y轴刻度的最小值
                            //max: 100,  // 设置y轴刻度的最大值
                            //splitNumber: 10,  //隔个数 设置y轴刻度间

                        },
                        series: [
                            {
                                //data: ylist,
                                name: name,
                                data: hzlList,
                                // 提示框
                                tooltip: {
                                    show: true,
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross'
                                    }

                                },
                                type: 'line',
                                showAllSymbol: false,//示折线图上所有小标签
                                // 显示数值
                                itemStyle: {normal: {label: {show: true}}}
                            },
                            {
                                //data: ylist,
                                name: '盈利/元',
                                data: brlist,
                                type: 'bar',
                                barWidth: 10,
                                // 显示数值
                                itemStyle: {normal: {label: {show: true}}}
                            }


                        ]

                    };
                    ///3、在渲染点击事件之前先清除点击事件,点击多次调用
                    myChart.off('click');
                    // triggerEvent为true时，触发点击事件
                    myChart.hideLoading();    //隐藏加载动画
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }

                    // 处理点击事件并且跳转到相应的百度搜索页面
                    myChart.on('click', function (params) {
                        console.log(params);
                        //var name = params[0].name;
                        console.log(params.data.id);
                        //window.open('/chartstest/detail/?id=' + encodeURIComponent(params.data.id));
                        window.open("/chartstest/kdjDetail/?id=" + encodeURIComponent(params.data.id));
                    });
                }


            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });

        {% comment %}if (option2 && typeof option2 === "object") {
               option2.xAxis.data = xlist;	/*  */
               option2.series = ylist;
            myChart.setOption(option2, true);
        }{% endcomment %}


    }


    $('#searchQuery').click(function () {
        var tscode = $("#tscode").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        var macdF = $("#macdF").val();
        var macdSL = $("#macdSL").val();
        var macdSI = $("#macdSI").val();
        var buy = $("#buy").val();
        var sell = $("#sell").val();

        // 不跨域要携带csrf_token 过去。
        queryParameter = {
            csrfmiddlewaretoken: '{{ csrf_token }}', // 为了防止csrf_token的拦截，所以必须带这个过去。
            tscode: tscode,
            startTime: startTime,
            endTime: endTime,
            macdF: macdF,
            macdSL: macdSL,
            macdSI: macdSI,
            buy: buy,
            sell: sell


        };
        $.ajax({
            url: '/chartstest/kdjResult/',
            type: 'post',
            data: queryParameter,
            success: function (res) {
                data = JSON.parse(res);
                // alert(data)
                //console.log(data);
                showDateLine(tscode);
            },
        })
    })

    //#删除数据

    function delDate(tscode) {


//var dom = document.getElementById("tushare");


        var names = [];    //类别数组（实际用来盛放X轴坐标值）
        var nums = [];    //销量数组（实际用来盛放Y坐标值）
        $.ajax({
            type: "POST",
            url: "/chartstest/delDate/", 				/* 显示折线图的路径 */
            data: {"tscode": tscode},		/* ,"add":add */

            dataType: "json",
            success: function (data) {

                status = data.status;
                //alert(status);
                {#            {{ dist3 = [] }}#}
                {#            {{ for line in data.dates: }}#}
                {#            {{ for line in range(len(data.dates)): }}#}
                {#            {{ dist2[line]['fields']}}#}
                {#            {{ dist3.append(dist2[line]['fields']) }}#}
                {#            {{ endfor  }}#}

            }
        })
    }
</script>
</body>
</html>
